<template>
  <view class="home_tab">
    <view class="title_name">
      <view class="control_box">
        <uni-segmented-control
          :current="current"
          :values="items"
          @clickItem="onClickItem"
          styleType="text"
          activeColor="#d4237a"
        ></uni-segmented-control>
      </view>
      <text class="iconfont iconsearch"></text>
    </view>
    <view class="title_conent">
      <view class="content">
        <view v-if="current === 0"> <recommend></recommend> </view>
        <view v-if="current === 1"> <category></category> </view>
        <view v-if="current === 2"> <new1></new1> </view>
        <view v-if="current === 3"> <album></album> </view>
      </view>
    </view>
  </view>
</template>

<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
import album from "./home-album/album";
import category from "./home-category/category";
import new1 from "./home-new/new";
import recommend from "./home-recommend/recommend";
export default {
  components: { uniSegmentedControl, album, category, new1, recommend },
  data() {
    return {
      items: ["推荐", "分类", "最新", "专辑"],
      current: 1,
    };
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
  },
};
</script>

<style lang="scss" scope>
.home_tab {
  .title_name {
    position: relative;
    .control_box {
      width: 60%;
      margin: 0 auto;
      padding: 10rpx 0;
    }
    .iconsearch {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 5%;
    }
  }
}
</style>
